<!-- 工作页面视图 - 提供工作任务管理和进度跟踪功能 -->
<template>
  <div class="home-container">






    <main class="home-main">
      <div class="welcome-section">
        <h2>欢迎来到 MentorX 系统</h2>
        <p>您的 AI 创业助手，为您提供全方位的创业指导和支持</p>
      </div>


      <div class="modules-grid">
        <ModuleCard 
          v-for="(card, index) in moduleCards" 
          :key="index"
          :id="card.id"
          :title="card.title"
          :desc="card.desc"
          @click="handleCardClick"
        />
      </div>


    </main>
  </div>
</template>













<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import ModuleCard from '@/components/common/ModuleCard.vue'

// 模块卡片数据
const router = useRouter()

const moduleCards = ref([
  { id: 'aimentor', title: 'AI Mentor', desc: '智能顾问，提供个性化创业指导' },
  { id: 'market', title: '市场洞察', desc: '行业趋势分析与竞品调研' },
  { id: 'process', title: '创业流程', desc: '流程模拟与材料导航' },
  { id: 'report', title: '项目汇报', desc: '自动生成汇报文件' },
  { id: 'company', title: '公司管理', desc: '智能财务报表与分析' },
  { id: 'other', title: '0', desc: '1' }
])

// 模块卡片点击事件处理
const handleCardClick = (cardId: string) => {
  console.log('点击了模块卡片:', cardId)
  // 这里可以根据不同的 cardId 执行不同的逻辑
  switch (cardId) {
    case 'aimentor':
      console.log('跳转到 AI Mentor 页面')
      // router.push('/aimentor')
      break
    case 'market':
      console.log('跳转到市场洞察页面')
      router.push('/market')
      break
    case 'process':
      console.log('跳转到创业流程页面')
      // router.push('/process')
      break
    case 'report':
      console.log('跳转到项目汇报页面')
      // router.push('/report')
      break
    case 'company':
      console.log('跳转到公司管理页面')
      router.push('/company')
      break
    case 'other':
      console.log('点击了其他功能')
      break
    default:
      console.log('未知模块')
  }
}
</script>





















<style scoped>
/*主背景容器*/
.home-container {
  height: 100%;
  width: 100%;
  background: #f5f7fa;
  overflow-y: auto;
}


.home-main {
  padding: 40px;
  max-width: 1200px;
  margin: 0 auto;
}

.welcome-section {
  text-align: center;
  margin-bottom: 40px;
}

.welcome-section h2 {
  color: #333;
  font-size: 32px;
  margin-bottom: 10px;
}

.welcome-section p {
  color: #666;
  font-size: 16px;
}


/* 响应式卡片容器 - 智能布局系统 */
.modules-grid {
  display: grid;
  gap: 20px;                    /* 卡片间距：20像素 */
  
  /* 移动端优先：默认1列布局 */
  grid-template-columns: 1fr;
}

/* 平板端：≥768px 显示2列 */
@media (min-width: 768px) {
  .modules-grid {
    grid-template-columns: repeat(2, 1fr);  /* repeat()函数：创建2个等宽列 */
  }
}

/* 小屏桌面：≥1024px 显示3列 */
@media (min-width: 1024px) {
  .modules-grid {
    grid-template-columns: repeat(3, 1fr);  /* 3列等宽网格 */
  }
}

/* 大屏桌面：≥1440px 显示4列 */
@media (min-width: 1440px) {
  .modules-grid {
    grid-template-columns: repeat(4, 1fr);  /* 4列等宽网格 */
  }
}

/* 超大屏：≥1600px 显示5列 */
@media (min-width: 1600px) {
  .modules-grid {
    grid-template-columns: repeat(5, 1fr);  /* 5列等宽网格，全部卡片一行显示 */
  }
}
</style>